<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>spirit8</title>
  <!-- 引入bootstrap框架文件 -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
  <!-- 引入animate.css文件 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">
  <!-- 引入初始化文件 -->
  <link rel="stylesheet" href="./assets/css/reset.css">
  <!-- 引入公共样式 -->
  <link rel="stylesheet/less" href="./assets/css/common.less">
  <!-- 引入index本页样式 -->
  <link rel="stylesheet/less" href="./assets/css/index.less">
</head>

<body>
  <!-- 头部导航栏 
  <header class="header navbar navbar-default">
    container  固定宽度居中  container-fluid 100%居中
    <div class="container">
      logo字 和三条线
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        logo
        <a class=" logo navbar-brand wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0);">Brand</a>
      </div>

      列表栏
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a class="wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0);">HOME</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="150ms" href="javascript:void(0);">ABOUT</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(0);">SERVICES</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="250ms" href="javascript:void(0);">RORTFOLIO</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="300ms" href="javascript:void(0);">TESRIMONIALS</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="350ms" href="javascript:void(0);">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </header>-->
  <header class="header navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <!-- 移动端的三条横杆菜单部分 -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <!-- LOGO图片 -->
        <a class="navbar-brand logo wow fadeInUp" href="javascript:void(0)">Spirit8</a>
      </div>

      <!-- 导航 -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a class="wow fadeInUp" data-wow-delay="0ms" href="javascript:void(0)">Home</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="100ms" href="#about">About</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="200ms" href="#sort">Services</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="300ms" href="#look">portfolio</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="400ms" href="#work">testimonials</a></li>
          <li><a class="wow fadeInUp" data-wow-delay="500ms" href="#contact">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </header>

  <!-- banner部分 -->
  <div class="banner" id="banner">
    <div class="title">
      WELLCOME ON <span class="bold">SPIRIT8</span>
    </div>
    <P class="remark">
      We are a digital agency
      <span class="bold">years of experience</span> and
      <span class="bold">with extraordinary people</span>
    </P>
    <div class="more">↓</div>
  </div>

  <!-- about部分 -->
  <div class="about" id="about">
    <!-- container容器居中 -->
    <div class="container">
      <!-- 左边图片区域 -->
      <div class="back">
        <img class="img-responsive center-block" src="./assets/image/about_back.png">
      </div>
      <!-- 右边区域 -->
      <div class="right">
        <!-- 标题 -->
        <div class="title wow fadeInUp" data-wow-delay="100ms">
          <div class="short">ABOUT US</div>
          <div class="long">
            <span>Some</span>
            words
            <span>about us</span>
          </div>
        </div>
        <!-- 文本 -->
        <p class="wow fadeInUp" data-wow-delay="200ms">We love building and rebuilding brands through our specific
          skills. Using colour,
          fonts, and illustration, we
          brand
          companies in a way they will never forget.</p>
        <!-- 列表 -->
        <ul class="list wow fadeInUp" data-wow-delay="300ms">
          <li>
            <span class="glyphicon glyphicon-record"></span>
            <span>Mission - </span>We deliver uniqueness and quality

          </li>
          <li>
            <span class="glyphicon glyphicon-record"></span>
            <span>Skills - </span>Delivering fast and excellent results

          </li>
          <li>
            <span class="glyphicon glyphicon-record"></span>
            <span>Clients - </span>Satisfied clients thanks to our experience

          </li>
        </ul>
        <!-- 按钮 -->
        <div class="more wow fadeInUp" data-wow-delay="400ms">
          <span class="glyphicon glyphicon-briefcase"></span>
          <span>Browse our work</span>
        </div>
      </div>
    </div>
  </div>

  <!-- sort -->
  <div class="sort" id="sort">
    <div class="container">
      <!-- 上部标题 -->
      <div class="title wow fadeInUp" data-wow-delay="100ms">
        <h3>meet <span>our team</span></h3>
      </div>
      <!-- 中部人物列表 -->
      <div class="box">
        <div class="jason wow fadeInUp" data-wow-delay="200ms">
          <div class="image">
            <img src="./assets/image/toux.png" alt="">
          </div>
          <div class="content">
            <div class="username">
              Jason Statham
            </div>
            <div class="nikename">Knife designer</div>
            <p class="more">Do not seek to chanage what has come before.
              Seek to create that which has not.
            </p>
          </div>
        </div>
        <div class="jason wow fadeInUp" data-wow-delay="300ms">
          <div class="image">
            <img src="./assets/image/toux.png" alt="">
          </div>
          <div class="content">
            <p class="username">
              Van Damme
            </p>
            <p class="nikename">No English</p>
            <p class="more">Do not seek to chanage what has come before.
              Seek to create that which has not.
            </p>
          </div>
        </div>
        <div class="jason wow fadeInUp" data-wow-delay="400ms">
          <div class="image">
            <img src="./assets/image/toux.png" alt="">
          </div>
          <div class="content">
            <p class="username">
              Sylvester Stallone
            </p>
            <p class="nikename">Cigar Lover</p>
            <p class="more">Do not seek to chanage what has come before.
              Seek to create that which has not.
            </p>
          </div>
        </div>
        <div class="jason wow fadeInUp" data-wow-delay="500ms">
          <div class="image">
            <img src="./assets/image/toux.png" alt="">
          </div>
          <div class="content">
            <p class="username">
              Jet Li
            </p>
            <p class="nikename">I need more money
            </p>
            <p class="more">Do not seek to chanage what has come before.
              Seek to create that which has not.
            </p>
          </div>
        </div>
      </div>
      <!-- 下部点 -->
      <div class="dian">
        <label></label>
        <label></label>
        <label></label>
      </div>
    </div>
  </div>

  <!-- Look -->
  <div class="look" id="look">
    <div class="container">
      <div class="title wow fadeInUp" data-wow-delay="100ms">
        <div class="long">
          tacke a look at <span>our services</span>
        </div>
        <p class="wenzi wow fadeInUp" data-wow-delay="200ms">
          Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Fini Lorem ipsum dolor sit amet, consectetur
          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
        </p>
      </div>
      <div class="list">
        <div class="item wow fadeInUp" data-wow-delay="300ms">
          <div class="tux">
            <img src="./assets/image/dn.png" alt="">
          </div>
          <div class="content">
            <div class="uname">web design</div>
            <p class="wenzi">
              the fist line of lorem lpsum,"lorem ipsum dolor sit amet..",comes from a line in section
              1.0.32.
            </p>
          </div>
        </div>
        <div class="item wow fadeInUp" data-wow-delay="400ms">
          <div class="tux">
            <img src="./assets/image/sj.png" alt="">
          </div>
          <div class="content">
            <div class="uname">Mobile apps</div>
            <p class="wenzi">
              the fist line of lorem lpsum,"lorem ipsum dolor sit amet..",comes from a line in section
              1.0.32.
            </p>
          </div>
        </div>
        <div class="item wow fadeInUp" data-wow-delay="500ms">
          <div class="tux">
            <img src="./assets/image/zxj.png" alt="">
          </div>
          <div class="content">
            <div class="uname">PHOTOGRAPHY</div>
            <p class="wenzi">
              the fist line of lorem lpsum,"lorem ipsum dolor sit amet..",comes from a line in section
              1.0.32.
            </p>
          </div>
        </div>
        <div class="item wow fadeInUp" data-wow-delay="600ms">
          <div class="tux">
            <img src="./assets/image/laba.png" alt="">
          </div>
          <div class="content">
            <div class="uname">marketing</div>
            <p class="wenzi">
              the fist line of lorem lpsum,"lorem ipsum dolor sit amet..",comes from a line in section
              1.0.32.
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- SOME -->
  <div class="some" id="some">
    <div class="container">
      <div class="title wow fadeInUp" data-wow-delay="100ms">
        <div class="long">
          some of <span>our clients</span>
        </div>
      </div>
      <div class="content">
        <div class="layout wow fadeInUp" data-wow-delay="200ms">
          <img src="./assets/image/Layer 64.png" alt="">
        </div>
        <div class="layout wow fadeInUp" data-wow-delay="300ms">
          <img src="./assets/image/Layer 65.png" alt="">
        </div>
        <div class="layout wow fadeInUp" data-wow-delay="400ms">
          <img src="./assets/image/Layer 67.png" alt="">
        </div>
        <div class="layout wow fadeInUp" data-wow-delay="500ms">
          <img src="./assets/image/Layer 68.png" alt="">
        </div>
        <div class="layout wow fadeInUp" data-wow-delay="600ms">
          <img src="./assets/image/Layer 69.png" alt="">
        </div>
      </div>
      <div class="dian">
        <label></label>
        <label></label>
        <label></label>
      </div>
    </div>
  </div>

  <!-- work -->
  <div class="work" id="work">
    <div class="container">
      <div class="title wow fadeInUp" data-wow-delay="100ms">
        take a look at
        <span>our work</span>
      </div>
      <p class="remork wow fadeInUp" data-wow-delay="200ms">
        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
        Evil)
        by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
        Renaissance. The
        first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
      </p>
      <div class="box">
        <div class="top">
          <div class="left wow fadeInUp" data-wow-delay="300ms">filter by type</div>
          <div class="right wow fadeInUp" data-wow-delay="300ms">
            <a href="javascript:void(0);">All</a>
            <a href="javascript:void(0);">Web Desin</a>
            <a href="javascript:void(0);">Mobile Design</a>
            <a href="javascript:void(0);">Photogray</a>
          </div>
          <div class="select">
            <select name="select">
              <option>All</option>
              <option>Web design</option>
              <option>Mobile design</option>
              <option>Photograpy</option>
            </select>
          </div>
        </div>
        <div class="list">
          <div class="item wow fadeInUp" data-wow-delay="400ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item wow fadeInUp" data-wow-delay="500ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item wow fadeInUp" data-wow-delay="600ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item wow fadeInUp" data-wow-delay="700ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item bg2 wow fadeInUp" data-wow-delay="400ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item bg2 wow fadeInUp" data-wow-delay="500ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item bg2 wow fadeInUp" data-wow-delay="600ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item bg2 wow fadeInUp" data-wow-delay="700ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item bg3 wow fadeInUp" data-wow-delay="400ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item bg3 wow fadeInUp" data-wow-delay="500ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item bg3 wow fadeInUp" data-wow-delay="600ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
          <div class="item bg3 wow fadeInUp" data-wow-delay="700ms">
            <div class="back">
              <div class="trend">
                <div class="bold">trend and fashion</div>
                <div class="light">Website design</div>
              </div>
              <div class="yuan">+</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- morl -->
  <div class="morl" id="morl">
    <div class="container">
      <div class="title">
        <div class="long wow fadeInUp" data-wow-delay="100ms">our clients'<span>testimonials</span></div>
      </div>
      <div class="adress wow fadeInUp" data-wow-delay="200ms">
        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum,
        "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
      </div>
      <div class="username wow fadeInUp" data-wow-delay="300ms">Dean Martin,CEO Acme Inc.</div>
      <div class="dian">
        <label></label>
        <label></label>
        <label></label>
      </div>
    </div>
  </div>

  <!-- contact -->
  <div class="contact" id="contact">
    <div class="container">
      <div class="title">
        <div class="long wow fadeInUp" data-wow-delay="100ms">
          FEEL FREE TO <span>CONTACT US</span>
        </div>
      </div>
      <div class="wenzi wow fadeInUp" data-wow-delay="200ms">
        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
        Evil)
        by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
        Renaissance.
      </div>
      <div class="form">
        <!-- 第一行 -->
        <div class="ename wow fadeInUp" data-wow-delay="300ms">
          <div class="name">
            <h4>Name <sup>*</sup></h4>
            <input type="text" class="name" placeholder="请输入用户名称">
          </div>
          <div class="address">
            <h4>Email Address<sup>*</sup></h4>
            <input type="text" class="address" placeholder="请输入邮箱">
          </div>
        </div>
        <!-- 第二行 -->
        <div class="message wow fadeInUp" data-wow-delay="400ms">
          <h4>Message <sup>*</sup></h4>
          <input type="textarea" class="textarea" placeholder="请输入内容" />
        </div>
        <!-- 第三行 -->
        <div class="button">
          <div class="send wow fadeInUp" data-wow-delay="500ms">
            SEND
          </div>
        </div>
      </div>


    </div>
  </div>

  <!-- foot -->
  <div class="foot">
    <div class="container">
      <div class="box">
        <div class="copy wow fadeInUp" data-wow-delay="200ms">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
        <div class="cate">
          <div class="cateimg wow fadeInUp" data-wow-delay="400ms">
            <img src="./assets/image/f.png" alt="">
          </div>
          <div class="cateimg wow fadeInUp" data-wow-delay="400ms">
            <img src="./assets/image/niao.png" alt="">
          </div>
          <div class="cateimg wow fadeInUp" data-wow-delay="400ms">
            <img src="./assets/image/8+.png" alt="">
          </div>
          <div class="cateimg wow fadeInUp" data-wow-delay="400ms">
            <img src="./assets/image/in.png" alt="">
          </div>
          <div class="cateimg wow fadeInUp" data-wow-delay="400ms">
            <img src="./assets/image/qiu.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 按钮 -->
  <div class="up" id="up">
    <a href="#banner">
      <img src="./assets/image/top.svg" alt="">
    </a>
  </div>
</body>

</html>
<!-- 引入less.js 文件 -->
<script src="./assets/js/less.min.js"></script>
<!-- 引入jquery文件 -->
<script src="./assets/js/jquery.js"></script>
<!-- 引入bootstrap.js文件 -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- 引入wow.js文件 -->
<script src="assets/js/wow.min.js"></script>
<!-- 实例化wow -->
<script>
  new WOW().init();
</script>